<div class="flex flex-column h-100" {{css-transition "gh-nav-contextual"}} data-test-nav-menu="design" ...attributes>
    <header class="gh-nav-header">
        <LinkTo @route="settings" class="gh-nav-menu-back-button" data-test-link="back-to-settings">Settings</LinkTo>
        {{svg-jar "arrow-right-small"}} Design
    </header>
    <section class="gh-nav-body gh-nav-design">
        <div class="gh-nav-top" {{on "click" this.transitionBackToIndex}}>
            <div class="gh-nav-list gh-nav-main">
                <LinkTo @route="settings.design" class="gh-nav-menu-title" @current-when="settings.design.index" {{on "click" this.closeAllSections}}>Site design</LinkTo>

                {{#let (eq this.openSection "brand") as |isOpen|}}
                    <button class="gh-nav-design-tab {{if isOpen "active"}}" type="button" {{on "click" (fn this.toggleSection "brand")}} data-test-nav-toggle="general">
                        {{svg-jar "paintbrush"}} Brand
                        <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
                    </button>
                    {{#liquid-if isOpen}}
                        <div class="gh-nav-design-settings" data-test-nav-group="general">
                            <Settings::Design::GeneralSettingsForm
                                @didUpdate={{perform this.themeManagement.updatePreviewHtmlTask}}
                            />
                        </div>
                    {{/liquid-if}}
                {{/let}}

                {{#each this.customThemeSettings.settingGroups as |group|}}
                    {{#let (eq this.openSection group.key) as |isOpen|}}
                        <button class="gh-nav-design-tab {{if isOpen "active"}}" type="button" {{on "click" (fn this.toggleSection group.key)}}>
                            {{svg-jar group.icon}} {{group.name}}
                            <span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-up-stroke" "arrow-down-stroke")}}</span>
                        </button>

                        {{#liquid-if isOpen}}
                            <div class="gh-nav-design-settings" data-test-nav-group={{group.key}}>
                                <Settings::Design::ThemeSettingsForm
                                    @themeSettings={{group.settings}}
                                    @updatePreview={{perform this.themeManagement.updatePreviewHtmlTask}}
                                />
                            </div>
                        {{/liquid-if}}
                    {{/let}}
                {{/each}}
            </div>
        </div>

        <div class="gh-nav-bottom">
            <div class="gh-change-theme">
                <div class="gh-nav-design-tab">
                    <LinkTo @route="settings.design.change-theme" {{on "click" this.closeAllSections}} aria-label="Change theme" data-test-nav="change-theme"></LinkTo>
                    <div>
                        <span>Change theme</span>
                        <span class="active-theme" data-test-text="current-theme">Current: {{this.activeTheme.name}}{{#if this.activeTheme.package.version}} - v{{this.activeTheme.package.version}}{{/if}}{{#if this.activeTheme.package.docs}}<a class="gh-theme-docs" href="{{this.activeTheme.package.docs}}" target="_blank" rel="noopener noreferrer">{{svg-jar "book-open" width="12" height="12"}}</a>{{/if}}</span>
                    </div>
                    <div class="gh-nav-design-tabicon">{{svg-jar "sync"}}</div>
                </div>
            </div>
        </div>
    </section>
</div>